<template>
    <v-layout style="height: 100%; overflow-y: auto;">
        <v-flex xs12 sm6 offset-sm3>
            <!--<v-card >-->
            <v-container
                    fluid
                    grid-list-md
            >
                <v-layout row wrap>
                    <v-flex class="xs12">
                        <v-parallax
                                dark
                                src="material.jpg"
                                style="height: 360px;"
                        >
                            <v-layout
                                    align-center
                                    column
                                    justify-center
                            >
                                <h1 class="display-2 font-weight-thin mb-3">easyDisk</h1>
                                <h4 class="subheading">use it easy, life should be easy~</h4>
                            </v-layout>
                        </v-parallax>
                    </v-flex>

                    <v-flex
                            v-for="card in cards"
                            :key="card.title"
                            v-bind="{ [`xs${card.flex}`]: true }"
                    >
                        <v-card>
                            <v-img
                                    :src="card.src"
                                    height="300px"
                            >
                                <v-container
                                        fill-height
                                        fluid
                                        pa-2
                                >
                                    <v-layout fill-height>
                                        <v-flex xs12 align-end flexbox>
                                            <span class="headline white--text" v-text="card.title"></span>
                                        </v-flex>
                                    </v-layout>
                                </v-container>
                            </v-img>

                            <v-card-actions>
                                <div>
                                    <v-icon color="red">favorite</v-icon>
                                    {{ nums_click[card.nums_i] }}
                                </div>
                                <v-spacer></v-spacer>

                                <v-btn icon @click="set_tabs(card.to)">
                                    <v-icon color="blue">open_in_new</v-icon>
                                </v-btn>
                            </v-card-actions>
                        </v-card>
                    </v-flex>
                </v-layout>
            </v-container>
            <!--</v-card>-->
        </v-flex>
    </v-layout>

</template>

<script>
    export default {
        props: {
            set_tabs: Function,
            get_nums: Function,
        },
        data: () => ({
            cards: [
                {
                    title: '我的笔记',
                    src: 'road.jpg',
                    flex: 6,
                    to: 'tab_blog',
                    nums_i: 1,
                },
                {
                    title: '共享文件',
                    src: 'plane.jpg',
                    flex: 6,
                    to: 'tab_file',
                    nums_i: 2,
                }
            ]
        }),

        computed: {
            nums_click() {
                return this.get_nums();
            }
        },

        watch: {},

        methods: {}
    }
</script>

<style>

</style>
